<template>

        <div class="chartbox">
            <div class="myChart" ref="chartRef"></div>

        </div>
</template>

<script>



import * as echarts from "echarts";

export default {
    props: { ChartData: Object },

    methods: {

        // 画折线图
        renderLine(obj) {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.chartRef);
            let options = {
                title: {
                    text: '金额图表'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: obj.xData,
                },
                yAxis: {
                    type: 'value'
                },
                series: obj.series,
            };
            myChart.setOption(options);
        },


    },
    mounted() {
        this.renderLine(this.ChartData)
    }


}
</script>

<style lang="scss" scoped>
.chartbox{
  width:800px
}
.myChart {
   
  margin-top: 50px;
  height: 300px;
  background: white;
}
</style>